<template>
  <div class="goods">
    <div class="top">
      <h3>商品列表</h3>
      <!-- 按钮 -->
      <div class="btn">
        <el-button>批量处理</el-button>
        <el-button type="primary">新增</el-button>
        <el-button type="danger">删除</el-button>
      </div>
    </div>

    <div class="table">
      <el-table :data="tableData.list" stripe >
      <el-table-column prop="id" label="商品ID" width="180" />
      <el-table-column prop="name" label="商品名称" width="180" />
      <el-table-column prop="title" label="商品描述" />
      <el-table-column prop="price" label="商品价格" />
      <el-table-column prop="count" label="商品库存" />
      <el-table-column prop="data" label="操作" >
        <template #default="scope">
          <el-button type="primary" :icon="Edit"  size="small" @click="editRow(scope.row)"/>
          <el-button type="success" :icon="Share"   size="small" @click="watchRow(scope.row)"/>
          <el-button type="danger" :icon="Delete"   size="small" @click="deleteRow(scope.row)"/>
        </template>
      </el-table-column>
    </el-table>
    </div>
  </div>
</template>

<script setup>
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
import { onMounted, reactive} from 'vue'
import axios from 'axios'

import { useRouter } from 'vue-router'
//实例化路由管理对象
var $router = useRouter();

//定义响应式数据
var tableData = reactive({ list: [] })
onMounted(() => {
  axios.get('/api/goods/list').then((res) => {
    tableData.list = res.data.list;
    console.log(tableData.list)
  })
})

//定义函数 - 删除数据
var deleteRow = (row) => {
  axios.post('/api/goods/delete', { id: row.id }).then((res) => {
    console.log('delete', res.data);
    tableData.list = res.data.list;
  })
}

// 编辑
var editRow = (row) => {
  $router.push({path:'/maxindex/goodsedit/',query:{id:JSON.stringify(row)}})
}
// 查看
var watchRow = (row) => {
  $router.push({path:'/maxindex/goodswatch/',query:{id:JSON.stringify(row)}})
}

</script>

<style>
.el-main>.goods{
  width: 90%;
  margin: 0 auto;
  background-color: #fff;
}
.el-main>.goods>.top{
  box-sizing: border-box;
  width: 1170px;
  padding: 0px 20px;
  margin: 30px 0px;
  background-color: #f2f2f2;
  z-index: 10;
  position: fixed;
  top: 50px;
}
.el-main>.goods h3{
  line-height: 50px;
}
.el-main>.goods .btn{
  line-height: 60px;
}
.el-main>.goods .btn>.el-button{
  margin-right: 30px;
}
.el-main>.goods>.table{
  margin-top: 160px;
}
.el-main>.goods>.table .el-table__inner-wrapper{
  position: fixed;
}
</style>